<!DOCTYPE HTML>
<html>
<head>
    <title>Chat</title>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" type="text/css" href="communication.css">
</head>
<body class="body-container">
<div class="right_icons">
    <i id="online_status" class="anchor fa fa-comments" aria-hidden="true" title=""></i>
    <i id="chat_history" class="anchor fa fa-history" aria-hidden="true" title="Show chat history"></i>
</div>

<div class="scroller scroller-left"><i class="fa fa-chevron-left" aria-hidden="true" title="Move left"></i></div>
<div class="scroller scroller-right"><i class="fa fa-chevron-right" aria-hidden="true" title="Move right"></i></div>

<div class="wrapper">
    <ul class="nav nav-tabs list" id="chat_tabs">
        <li class="active">
            <a data-target="#all_chat_tab" data-toggle="tab" aria-expanded='true' title="All Chats">All Chats</a>
        </li>
        <li class="create-room">
            <a data-target="#chat_room_tab" data-toggle="tab" aria-expanded='false' title="Chat Room">Chat Room</a>
        </li>
    </ul>
</div>
<div class="tab-content">
    <div class="tab-pane active fade in" id="all_chat_tab">
        <div id="all_messages" class="row mCustomScrollbar">
        </div>
    </div>
    <div class="tab-pane fade" id="chat_room_tab">
        <div id="join_room" class="join-room">
            <input id="txtbox_chat_room" type="text" class="form-control chat-room-textbx" value=""
                   placeholder="Type a room name to join...">
            <br>
            <div class="persistent-rooms-visibility">
                <div class="room-text">Or click any available room to join</div>
                <div id="global_rooms" class="global-rooms"></div>
            </div>
        </div>
    </div>
</div>
<div class="send_message">
    <textarea id="send_data" class="form-control clearable message-textarea" placeholder="Type your message...">
    </textarea>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<script type="text/javascript" src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://use.fontawesome.com/89a733ecb7.js"></script>
<script type="text/javascript" src="communication.js"></script>

</body>
</html>
